<template>
  <div class="common-layout">
    <el-header>
 
        欢迎您：{{username}}
                    <el-button @click="exitFn">退出</el-button>
    </el-header>
    <el-container>
        <el-aside width="200px">
      <el-menu
      :router="true"
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
      >
        <!-- <el-sub-menu index="1">
          <template #title>
            <span>商品信息管理</span>
          </template>
            <el-menu-item index="/goodslist">商品列表</el-menu-item>
            <el-menu-item index="/goodspaging">商品分页</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <span>轮播图的管理</span>
          </template>
            <el-menu-item index="/getbanner">轮播图列表</el-menu-item>
            <el-menu-item index="/addbanner">轮播图添加</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <span>操作人员管理</span>
          </template>
            <el-menu-item index="/listadmin">操作人员列表</el-menu-item>
            <el-menu-item index="/addadmin">添加操作人员</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <span>订单信息管理</span>
          </template>
            <el-menu-item index="/getorder">查看全部订单列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <span>地址列表管理</span>
          </template>
            <el-menu-item index="/address">查看地址</el-menu-item>
        </el-sub-menu> -->
        <!--  -->
        <template v-for="item in menudata">
          <!-- 如果没有children 就是一级路由 -->
          <el-menu-item v-if=" !item.children" :index="item.path">
            {{ item.label}}
          </el-menu-item>
          <el-sub-menu v-else :index="item.id">
              <template #title>
                <span>{{ item.label }}</span>
              </template>
              <el-menu-item v-for="sonitem in item.children"  :index="sonitem.path">
                {{ sonitem.label }}
              </el-menu-item>
          </el-sub-menu>
        </template>
          </el-menu>
        </el-aside>
      <el-container>
       
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
    </el-container>
  
  </div>
</template>

<script setup lang="ts">
// import {
//   Document,
//   Menu as IconMenu,
//   Location,
//   Setting,
// } from "@element-plus/icons-vue";
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import {ElNotification}  from 'element-plus'
import "element-plus/es/components/notification/style/css"
// 引入定义全部的菜单数据
import getMenus from "../../grants/menudata";
import  getRoutes,{clearCurrentRoutes} from"../../grants/router";
import { useStore } from "vuex";
const $router = useRouter();

const menudata = reactive(getMenus());
// getRoutes()  
//第二种
// 导入vuex提供的useStore
let $store = useStore()
// 如果已经添加过来就不执行getRoutes(),没有才执行
if(!$store.state.isAddRoute){
  getRoutes()  
}
const username = ref(sessionStorage.getItem("phn"));
const exitFn = ()=>{
    sessionStorage.clear();
    clearCurrentRoutes();//清除当前用户的路由配置；
    $store.commit({
        type:"setisAddRoute",   //setisAddRoute就是mutations里面定义的函数名
        isAddRoute:false    //isAddRoute就是state里面的属性
    })
    ElNotification({
        title:"提示",
        message: "退出成功",
        type: "success",
    })
    $router.push("/Login");
}
</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}
.el-container {
  width: 100%;
  height: 100%;
}
.el-header {
  width: 100%;
  height: 100px;
  background-color: pink;
  display: flex;
  justify-content: end;
  align-items: center;
}
.el-aside {
  width: 200px;
  height: 100%;
  background-color: rgb(84, 92, 100);
}

</style>